<template>
  <div class="page">
    <nav-bar title="延时申请"></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-form
        validate-trigger="onSubmit"
        :show-error="false"
        error-message-align="right"
        :label-width="120"
        @submit="onSubmit"
      >
        <van-field required label="申请原因" readonly :border="false" />
        <van-field
          v-model="formParams.visitRecord"
          rows="5"
          autosize
          type="textarea"
          maxlength="100"
          show-word-limit
          class="van-field__value--textarea"
          placeholder="请输入申请原因……"
          :border="false"
          :rules="rules.visitRecord"
        />
        <van-field
          required
          readonly
          clickable
          name="expirationData"
          v-model="formParams.delayedEndTime"
          label="申请时间"
          placeholder="请选择"
          right-icon="arrow"
          input-align="right"
          :rules="rules.delayedEndTime"
          @click="dateOpenPopup('delayedEndTime')"
        />
        <div style="margin: 60px 16px">
          <van-button block type="info" native-type="submit" :disabled="buttonDisabled">提交</van-button>
        </div>
      </van-form>
    </div>
    <!-- 日期 -->
    <van-popup v-model="datePopupShow" round position="bottom" @close="date = new Date()">
      <van-datetime-picker
        v-model="date"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel="datePopupShow = false"
        @confirm="dateOnConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
import SelectPopup from '@/mixins/selectPopup'
import Event from '@/api/event'
export default {
  mixins: [SelectPopup],
  data() {
    return {
      minDate: this.$route.query.overTime ? new Date(this.$route.query.overTime) : new Date(),
      formParams: {
        eventCode: this.$route.query.eventCode,
        deptCode: this.$route.query.deptCode,
        delayedEndTime: '',
        recordType: '3',
        visitRecord: ''
      },
      rules: {
        visitRecord: [{ required: true, message: '请输入申请原因' }],
        delayedEndTime: [{ required: true, message: '请选择申请时间' }]
      },
      buttonDisabled: false
    }
  },
  methods: {
    onSubmit() {
      this.buttonDisabled = true
      Event.Manage.delayApply(this.formParams)
        .then(res => {
          this.buttonDisabled = false
          const { status } = res.data
          if (status === 0) {
            this.$router.push('/page/message?backTo=-2&title=提交成功')
          } else {
            this.$toast.fail(res.data.message)
          }
        })
        .catch(() => {
          this.buttonDisabled = false
        })
    }
  }
}
</script>
